<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>明天银行用户页面</title>
    <script src="js/axios.min.js"></script>
    <!-- 先引入vue的js文件 -->
    <script src="js/vue.min.js"></script>
    <!-- 引入elementUI全局css样式 -->
    <link rel="stylesheet" href="elementUI/index.css">
    <!-- 引入elementUI动态效果 -->
    <script src="elementUI/index.js"></script>
    <style>
        body {
            margin: 0;
        }
        
        .top {
            width: 100%;
            text-align: center;
            background-color: antiquewhite;
        }
        
        .left {
            width: 25%;
            text-align: left;
        }
        
        .right {
            height: 100vh;
            text-align: center;
            background-color: rgb(234, 225, 211);
        }
        
        .bottom {
            text-align: center;
            background-color: rgb(93, 90, 90);
            color: aliceblue;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        
        .navigationBar {
            width: 100%;
            height: 100vh;
            box-sizing: border-box;
            margin: 0;
            padding: 2%;
        }
        
        .navigationBar * {
            width: 100%;
            font-size: large;
            box-sizing: border-box;
        }
        
        .main * {
            font-size: large;
        }
        
        .exit {
            position: fixed;
            right: 0;
            top: 5px;
        }
    </style>
</head>

<body>
    <el-container id="app">
        <el-header class="top" style="height: 50px;">
            <h2>欢迎 {{user.userType}} {{user.name}} 进入本网站</h2>
            <el-button type="primary" class="exit" @click="onExit()">退出</el-button>
        </el-header>
        <el-container class="main">
            <el-aside class="left" style="width: 25%;">
                <el-menu default-active="1" class="navigationBar" text-color="black" active-text-color="black">
                    <el-submenu>
                        <template slot="title">
                            <span>功能栏</span>
                        </template>
                        <el-menu-item index="1" @click="selectTab(1)">个人信息</el-menu-item>
                        <el-menu-item index="2" @click="selectTab(2)">转账记录</el-menu-item>
                        <el-menu-item index="3" @click="selectTab(3)">转账</el-menu-item>
                        <el-menu-item index="4" @click="selectTab(4)">修改密码</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main class="right">
                <div v-show="tabSelected === 1">
                    <el-descriptions title="用户信息">
                        <el-descriptions-item span="3" label="用户名">{{user.userName}}</el-descriptions-item>
                        <el-descriptions-item span="3" label="密码">{{user.passWord}}</el-descriptions-item>
                        <el-descriptions-item span="3" label="昵称">{{user.name}}</el-descriptions-item>
                        <el-descriptions-item span="3" label="邮箱">{{user.email}}</el-descriptions-item>
                        <el-descriptions-item span="3" label="余额">{{user.balance}}💴</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div v-show="tabSelected === 2">
                    <el-table v-loading="table.loading" :data="table.tableData" style="width: 100%">
                        <el-table-column prop="id" style="width: 15%" label="订单编号">
                        </el-table-column>
                        <el-table-column prop="myUsername" style="width: 15%" label="转账">
                        </el-table-column>
                        <el-table-column prop="toUsername" style="width: 15%" label="目标账户">
                        </el-table-column>
                        <el-table-column prop="money" style="width: 15%" label="转账金额">
                        </el-table-column>
                        <el-table-column prop="time" style="width: 15%" label="时间">
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="SizeChange" @current-change="CurrentChange" :current-page="table.currentPage" :page-sizes="table.PageSizes" :page-size="table.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="table.total">
                    </el-pagination>
                </div>
                <div v-show="tabSelected === 3">
                    <el-form ref="transform" :model="transform" label-width="10%">
                        <el-form-item label="目标账户：">
                            <el-input v-model="transform.toUser" placeholder="请输入目标账户" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="转账密码：">
                            <el-input v-model="transform.password" placeholder="请输入你的账户密码" style="width: 80%;"></el-input>
                        </el-form-item>

                        <el-form-item label="转账金额(元)">
                            <el-input v-model="transform.amount" placeholder="请输入转账金额" style="width: 80%;"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="TransForm()">转账</el-button>
                            <el-button @click="CancelTrans()">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-show="tabSelected === 4">
                    <el-form ref="reviseform" :model="reviseform" label-width="20%">
                        <el-form-item label="旧密码：">
                            <el-input v-model="reviseform.password" placeholder="请输入你账户的旧密码" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码：">
                            <el-input v-model="reviseform.newPassword" placeholder="请输入你的账户新密码" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="确认新密码：">
                            <el-input v-model="reviseform.reNewPassword" placeholder="请重新输入你的账户新密码" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="ReviceForm()">确认修改</el-button>
                            <el-button @click="CancelRevise()">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-main>
        </el-container>
        <el-footer class="bottom" style="height: 25px;">明天银行在线网站</el-footer>
    </el-container>
</body>
<script>
    vm = new Vue({
        el: "#app",
        data: {
            tabSelected: 0, // 默认不显示任何页面
            // 用户详情表数据
            user: {
                userType: "用户",
                userName: "user",
                passWord: "user",
                name: "明天",
                email: "sdajfkl@sa.com",
                balance: 0
            },
            // 用户交易记录表数据
            table: {
                tableData: {},
                total: 0,
                pageSize: 10,
                PageSizes: [5, 10, 20, 50, 100, 150],
                currentPage: 1,
                loading: false
            },
            // 用户转账表单
            transform: {
                toUser: "",
                password: "",
                amount: ""
            },
            // 用户修改密码表单
            reviseform: {
                password: "",
                newPassword: "",
                reNewPassword: "",
            },
        },
        methods: {
            // 用户退出关闭回话操作
            onExit() {
                axios({
                    method: 'post',
                    url: 'userMain',
                    params: {
                        "code": -1,
                    },
                    responseType: 'json'
                }).then(response => {
                    let data = response.data;
                    window.location.href = data.redirectUrl;
                }).catch(error => {
                    console.log(error);
                });
            },
            // 用户点击相关功能跳转操作
            selectTab(tabNumber) {
                this.tabSelected = tabNumber;
                if(tabNumber === 1) {
                    axios({
                        method: 'post',
                        url: 'userMain',
                        params: {
                            "code": tabNumber,
                        },
                        responseType: 'json'
                    }).then(response => {
                        // console.log(response.data);
                        let data = response.data.data;
                        this.user.userName = data.userName;
                        this.user.passWord = data.passWord;
                        this.user.balance = data.balance;
                        this.user.email = data.email;
                        this.user.name = data.name;
                    }).catch(error => {
                        console.log(error);
                    });
                } else if (tabNumber === 2) {
                    this.SizeChange(5);
                }
            },
            // 用户在交易记录页面进行设置页面大小的操作
            SizeChange(val) {
                this.table.pageSize = val;
                this.table.loading = true;
                axios({
                    method: 'post',
                    url: 'userMain',
                    params: {
                        "code": 21,
                        "pageSize": this.table.pageSize,
                        "currentPage": this.table.currentPage
                    },
                    responseType: 'json'
                }).then(response => {
                    console.log(response.data);
                    let resultData = response.data.resultData;
                    this.table.tableData = resultData.data;
                    this.table.total = resultData.code;
                }).catch(error => {
                    console.log(error);
                });
                this.table.loading = false;
            },
            // 用户在交易记录页面进行页面跳转的操作
            CurrentChange(val) {
                this.table.currentPage = val;
                try {
                    this.table.loading = true;
                    setTimeout(function() {
                        this.$message.success("加载成功！");
                        axios({
                            // 请求方式
                            method: 'post',
                            url: 'userMain',
                            params: {
                                "code": 22,
                                "pageSize": this.table.pageSize,
                                "currentPage": this.table.currentPage
                            },
                            responseType: 'json'
                        }).then(response => {
                            console.log(response.data);
                            let resultData = response.data.resultData;
                            this.table.tableData = resultData.data;
                            this.table.total = resultData.code;
                        }).catch(error => {
                            console.log(error);
                        });
                        this.table.loading = false;
                    }.bind(this), 2000);

                } catch (error) {
                    console.error(error);
                }
            },
            // 用户转账提交表单的操作
            TransForm() {
                axios({
                    method: 'post',
                    url: 'userMain',
                    params: {
                        "code": 31,
                        "toUser": this.transform.toUser,
                        "password": this.transform.password,
                        "amount": this.transform.amount
                    },
                    responseType: 'json'
                }).then(response => {
                    let data = response.data;
                    // console.log(data);
                    if(data.addRes === 1) {
                        this.$message(data.msg);
                        this.transform.toUser = "";
                        this.transform.password = "";
                        this.transform.amount = "";
                        this.selectTab(1);
                    } else if(data.addRes === 0) {
                        this.$message(data.msg);
                    } else {
                        this.$message(data.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            // 用户转账取消提交表单的操作
            CancelTrans() {
                this.transform.toUser = "";
                this.transform.password = "";
                this.transform.amount = "";
                this.selectTab(1);
            },
            // 修改密码表单提交操作
            ReviceForm(){
                axios({
                    method: 'post',
                    url: 'userMain',
                    params: {
                        "code": 41,
                        "password": this.reviseform.password,
                        "newPassword": this.reviseform.newPassword,
                        "reNewPassword": this.reviseform.reNewPassword,
                    },
                    responseType: 'json'
                }).then(response => {
                    let data = response.data;
                    // console.log(data);
                    if(data.resReset) {
                        this.reviseform.password = "";
                        this.reviseform.newPassword = "";
                        this.reviseform.reNewPassword = "";
                        this.selectTab(1);
                        this.$message(data.msg);
                    } else {
                        this.$message(data.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            // 取消修改密码
            CancelRevise() {
                this.reviseform.password = "";
                this.reviseform.newPassword = "";
                this.reviseform.reNewPassword = "";
                this.selectTab(1);
            },
        }
    })
</script>

</html>